import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { Link, useLocation } from "react-router-dom";
import "./index.scss";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import { useEffect, useState } from "react";
import {
  getChannelAPI,
  submitPublishAPI,
  getArticleDetailsAPI,
} from "@/apis/airticle";
import { type } from "@testing-library/user-event/dist/type";
import { useChannel } from "@/hooks/useChannel";

const { Option } = Select;

const Publish = () => {
  const [value, setValue] = useState(0);
  const [form] = Form.useForm();
  const onChange = (e) => {
    setValue(e.target.value);
    console.log("value", e.target.value);
  };
  const { channelList } = useChannel();
  const location = useLocation();
  const id = location.state?.id || "";
  useEffect(() => {
    if (!id) return;
    getArticleDetailsAPI(id).then((res) => {
      form.setFieldsValue({
        ...res.data,
        type: res.data.cover.type,
      });
      setValue(res.data.cover.type);
      setImageList(
        res.data.cover.images.map((x) => {
          return { x };
        })
      );
    });
  }, [id]);

  // 提交表单
  const onFinish = (formValue) => {
    console.log(formValue);
    submitPublishAPI({
      ...formValue,
      content: "<p>你好</p>",
      cover: { type: value, images: imageList.map((x) => x.response.data.url) },
    }).then((res) => {
      console.log(res);
    });
  };

  // 上传图片
  const [imageList, setImageList] = useState([]);
  const onUploadChange = (info) => {
    setImageList(info.fileList);
  };
  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb
            items={[
              { title: <Link to={"/"}>首页</Link> },
              { title: "发布文章" },
            ]}
          />
        }
      >
        <Form
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ type: 0 }}
          onFinish={onFinish}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "请输入文章标题" }]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: "请选择文章频道" }]}
          >
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              {/* <Option value={0}>推荐</Option> */}
              {channelList.map((x) => (
                <Option key={x.id} value={x.id}>
                  {x.name}
                </Option>
              ))}
            </Select>
          </Form.Item>

          {/* 上传 */}
          <Form.Item label="封面" name="type">
            <Radio.Group
              onChange={onChange}
              options={[
                {
                  value: 1,
                  label: "单图",
                },
                {
                  value: 3,
                  label: "3图",
                },
                {
                  value: 0,
                  label: "无图",
                },
              ]}
            >
              {/* <Radio value={0}> 单图 </Radio>
              <Radio value={1}> 三图 </Radio>
              <Radio value={2}> 无图 </Radio> */}
            </Radio.Group>
          </Form.Item>
          {value > 0 && (
            <Upload
              name="image"
              listType="picture-card"
              showUploadList
              action={"http://geek.itheima.net/v1_0/upload"}
              onChange={onUploadChange}
              maxCount={value}
              fileList={imageList}
            >
              <div style={{ marginTop: 8 }}>
                <PlusOutlined />
              </div>
            </Upload>
          )}
          <Form.Item
            label="内容"
            name="content"
            // rules={[{ required: true, message: "请输入文章内容" }]}
          >
            <Input style={{ width: 400 }} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Publish;
